<template>
	<div v-if="tableData.total > 0" class="vue-pagination">
		<el-pagination
			:page-sizes="[5, 20, 50, 100]"
			:page-size="tableData.pageSize"
			:total="tableData.total"
			:current-page.sync="tableData.pageNum"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="changePageSize"
			@current-change="changeCurrentPage"
		>
		</el-pagination>
	</div>
</template>

<script>
export default {
	name: "Pagination",
	// 接收父组件传递的参数
	props: {
		tableData: {
			type: Object,
			default: {
				pageNum: 1,
				pageSize: 5,
				total: 0,
			},
		},
	},
	methods: {
        // 页长改变时，向父组件传递参数
		changePageSize: function (obj) {
			this.tableData.pageSize = obj;
			this.$emit("emitPageData", this.tableData);
		},
        // 页码改变时，向父组件传递参数
		changeCurrentPage: function (obj) {
           // console.log(obj);
			this.tableData.pageNum = obj;
			this.$emit("emitPageData", this.tableData);
		},
	},
};
</script>

<style></style>
